<!DOCTYPE html>
<html lang="en-gb" dir="ltr">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Sortable - UIkit tests</title>
        <script src="js/test.js"></script>

        <style>

            .test-item {
                font-size: 0.875rem;
            }

        </style>
        <script>

            var util = UIkit.util;

            util.ready(function () {

                util.on(document.body, 'start moved added removed stop', function (e, sortable, el) {
                    console.log(e.type, sortable, el);
                });

            });

        </script>
    </head>

    <body>

        <div class="uk-container">

            <h1>Sortable</h1>

            <h2>Grid</h2>

            <ul class="uk-grid-match uk-child-width-1-2 uk-child-width-1-5@m" uk-sortable="handle: .uk-card" uk-grid>
                <li>
                    <div class="uk-card uk-card-default uk-card-body">
                        <a href="https://getuikit.com">Link</a>
                        <img src="images/avatar.jpg" width="40" alt="">
                    </div>
                </li>
                <li><a class="uk-card uk-card-default uk-card-body uk-display-block" href="https://getuikit.com">Link Handle</a></li>
                <li><div class="uk-card uk-card-default uk-card-body">Item 3</div></li>
                <li><div class="uk-card uk-card-default uk-card-body">Item 4</div></li>
                <li><div class="uk-card uk-card-default uk-card-body">Item 5</div></li>
                <li><div class="uk-card uk-card-default uk-card-body">Item 6</div></li>
                <li><div class="uk-card uk-card-default uk-card-body">Item 7</div></li>
                <li><div class="uk-card uk-card-default uk-card-body">Item 8</div></li>
                <li><div class="uk-card uk-card-default uk-card-body">Item 9</div></li>
                <li><div class="uk-card uk-card-default uk-card-body">Item 10</div></li>
                <li><div class="uk-card uk-card-default uk-card-body">Item 11</div></li>
                <li><div class="uk-card uk-card-default uk-card-body">Item 12</div></li>
            </ul>

            <div class="uk-grid uk-child-width-1-3">
                <div>

                    <h2>Group</h2>

                    <div uk-sortable="group: test">
                        <div class="uk-margin">
                            <div class="uk-card uk-card-default uk-card-body uk-card-small">Item 1</div>
                        </div>
                        <div class="uk-margin">
                            <div class="uk-card uk-card-default uk-card-body uk-card-small">Item 2</div>
                        </div>
                        <div class="uk-margin">
                            <div class="uk-card uk-card-default uk-card-body uk-card-small">Item 3</div>
                        </div>
                        <div class="uk-margin">
                            <div class="uk-card uk-card-default uk-card-body uk-card-small">Item 4</div>
                        </div>
                        <div class="uk-margin">
                            <div class="uk-card uk-card-default uk-card-body uk-card-small">Item 5</div>
                        </div>
                    </div>

                </div>
                <div>

                    <h2>Handle</h2>

                    <div uk-sortable="handle: .uk-sortable-handle; group: test">
                        <div class="uk-margin">
                            <div class="uk-card uk-card-default uk-card-body uk-card-small">
                                <span class="uk-sortable-handle uk-margin-small-right" uk-icon="icon: table"></span> Item 1
                            </div>
                        </div>
                        <div class="uk-margin">
                            <div class="uk-card uk-card-default uk-card-body uk-card-small">
                                <span class="uk-sortable-handle uk-margin-small-right" uk-icon="icon: table"></span> Item 2
                            </div>
                        </div>
                        <div class="uk-margin">
                            <div class="uk-card uk-card-default uk-card-body uk-card-small">
                                <span class="uk-sortable-handle uk-margin-small-right" uk-icon="icon: table"></span> Item 3
                            </div>
                        </div>
                        <div class="uk-margin">
                            <div class="uk-card uk-card-default uk-card-body uk-card-small">
                                <span class="uk-sortable-handle uk-margin-small-right" uk-icon="icon: table"></span> Item 4
                            </div>
                        </div>
                        <div class="uk-margin">
                            <div class="uk-card uk-card-default uk-card-body uk-card-small">
                                <span class="uk-sortable-handle uk-margin-small-right" uk-icon="icon: table"></span> Item 5
                            </div>
                        </div>
                    </div>

                </div>
                <div>

                    <h2>Empty</h2>

                    <div uk-sortable="group: test"></div>

                </div>
            </div>

            <h2>Nav + Custom Drag Class</h2>

            <ul class="uk-nav uk-nav-default uk-width-1-4@m" uk-sortable="cls-custom: test-item uk-box-shadow-small uk-link-muted uk-flex uk-flex-middle uk-background-default">
                <li class="uk-active"><a href="#">Active</a></li>
                <li><a href="#">Item</a></li>
                <li><a href="#">Item</a></li>
                <li><a href="#">Item</a></li>
                <li><a href="#">Item</a></li>
                <li><a href="#">Item</a></li>
                <li><a href="#">Item</a></li>
                <li><a href="#">Item</a></li>
                <li><a href="#">Item</a></li>
            </ul>

            <h2>Nested Lists</h2>

            <ul class="uk-grid-small uk-grid-match uk-child-width-1-2" uk-sortable="group: first" uk-grid>
                <li><div class="uk-card uk-card-default uk-padding-small">
                    <ul class="uk-grid-match uk-child-width-1-3" uk-sortable="group: second" uk-grid>
                        <li><div class="uk-card uk-card-secondary uk-padding-small">
                            <ul class="uk-grid-small uk-grid-match uk-child-width-1-1" uk-sortable="group: third" uk-grid>
                                <li><div class="uk-card uk-card-primary uk-padding-small">Item 1</div></li>
                                <li><div class="uk-card uk-card-primary uk-padding-small">Item 2</div></li>
                                <li><div class="uk-card uk-card-primary uk-padding-small">Item 3</div></li>
                            </ul>
                        </div></li>
                        <li><div class="uk-card uk-card-secondary uk-padding-small">
                            <ul class="uk-grid-small uk-grid-match uk-child-width-1-1" uk-sortable="group: third" uk-grid>
                                <li><div class="uk-card uk-card-primary uk-padding-small">Item 4</div></li>
                                <li><div class="uk-card uk-card-primary uk-padding-small">Item 5</div></li>
                            </ul>
                        </div></li>
                        <li><div class="uk-card uk-card-secondary uk-padding-small">
                            <ul class="uk-grid-small uk-grid-match uk-child-width-1-1" uk-sortable="group: third" uk-grid>
                            </ul>
                        </div></li>
                    </ul>
                </div></li>
                <li><div class="uk-card uk-card-default uk-padding-small">
                    <ul class="uk-grid-match uk-child-width-1-3" uk-sortable="group: second" uk-grid>
                        <li><div class="uk-card uk-card-secondary uk-padding-small">
                            <ul class="uk-grid-small uk-grid-match uk-child-width-1-1" uk-sortable="group: third" uk-grid>
                                <li><div class="uk-card uk-card-primary uk-padding-small">Item 6</div></li>
                                <li><div class="uk-card uk-card-primary uk-padding-small">Item 7</div></li>
                            </ul>
                        </div></li>
                        <li><div class="uk-card uk-card-secondary uk-padding-small">
                            <ul class="uk-grid-small uk-grid-match uk-child-width-1-1" uk-sortable="group: third" uk-grid>
                                <li><div class="uk-card uk-card-primary uk-padding-small">Item 8</div></li>
                                <li><div class="uk-card uk-card-primary uk-padding-small">Item 9</div></li>
                            </ul>
                        </div></li>
                        <li><div class="uk-card uk-card-secondary uk-padding-small">
                            <ul class="uk-grid-small uk-grid-match uk-child-width-1-1" uk-sortable="group: third" uk-grid>
                            </ul>
                        </div></li>
                    </ul>
                </div></li>
                <li><div class="uk-card uk-card-default uk-padding-small">
                    <ul class="uk-grid-match uk-child-width-1-3" uk-sortable="group: second" uk-grid>
                        <li><div class="uk-card uk-card-secondary uk-padding-small">
                            <ul class="uk-grid-small uk-grid-match uk-child-width-1-1" uk-sortable="group: third" uk-grid>
                                <li><div class="uk-card uk-card-primary uk-padding-small">Item 10</div></li>
                            </ul>
                        </div></li>
                        <li><div class="uk-card uk-card-secondary uk-padding-small">
                            <ul class="uk-grid-small uk-grid-match uk-child-width-1-1" uk-sortable="group: third" uk-grid>
                                <li><div class="uk-card uk-card-primary uk-padding-small">Item 11</div></li>
                            </ul>
                        </div></li>
                        <li><div class="uk-card uk-card-secondary uk-padding-small">
                            <ul class="uk-grid-small uk-grid-match uk-child-width-1-1" uk-sortable="group: third" uk-grid>
                            </ul>
                        </div></li>
                    </ul>
                </div></li>
            </ul>

            <h2>JavaScript Options</h2>

            <div class="uk-overflow-auto">
                <table class="uk-table uk-table-striped">
                    <thead>
                        <tr>
                            <th>Option</th>
                            <th>Value</th>
                            <th>Default</th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><code>group</code></td>
                            <td>String</td>
                            <td>''</td>
                            <td>The group</td>
                        </tr>
                        <tr>
                            <td><code>animation</code></td>
                            <td>Number</td>
                            <td>150</td>
                            <td>The animation duration.</td>
                        </tr>
                        <tr>
                            <td><code>threshold</code></td>
                            <td>Number</td>
                            <td>10</td>
                            <td>Mouse move threshold before dragging starts.</td>
                        </tr>
                        <tr>
                            <td><code>cls-item</code></td>
                            <td>String</td>
                            <td>uk-sortable-item</td>
                            <td>The item class.</td>
                        </tr>
                        <tr>
                            <td><code>cls-placeholder</code></td>
                            <td>String</td>
                            <td>uk-sortable-placeholder</td>
                            <td>The placeholder class.</td>
                        </tr>
                        <tr>
                            <td><code>cls-drag</code></td>
                            <td>String</td>
                            <td>uk-sortable-drag</td>
                            <td>The ghost class.</td>
                        </tr>
                        <tr>
                            <td><code>cls-drag-state</code></td>
                            <td>String</td>
                            <td>uk-sortable-dragging</td>
                            <td>The body's dragging class.</td>
                        </tr>
                        <tr>
                            <td><code>cls-base</code></td>
                            <td>String</td>
                            <td>uk-sortable</td>
                            <td>The list's class.</td>
                        </tr>
                        <tr>
                            <td><code>cls-no-drag</code></td>
                            <td>String</td>
                            <td>uk-sortable-nodrag</td>
                            <td>Prevent dragging on elements with this class.</td>
                        </tr>
                        <tr>
                            <td><code>cls-empty</code></td>
                            <td>String</td>
                            <td>uk-sortable-empty</td>
                            <td>The empty list class.</td>
                        </tr>
                        <tr>
                            <td><code>cls-custom</code></td>
                            <td>String</td>
                            <td>''</td>
                            <td>The ghost's custom class.</td>
                        </tr>
                        <tr>
                            <td><code>handle</code></td>
                            <td>String</td>
                            <td>false</td>
                            <td>The handle selector.</td>
                        </tr>
                    </tbody>
                </table>
            </div>

        </div>

    </body>
</html>
